<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码刷题平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 代码高亮 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

    <!-- CodeMirror 依赖 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/theme/material.min.css">
    <!-- 深色主题 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/theme/dracula.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/theme/monokai.min.css">
    <!-- 浅色主题 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.min.css">
    <!-- CodeMirror 功能插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/python/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/clike/clike.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/addon/edit/closebrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/addon/comment/comment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/addon/hint/show-hint.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/addon/hint/show-hint.min.css">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        dark: '#1D2129',
                        'dark-light': '#272E3B',
                        'light-gray': '#F2F3F5',
                        'medium-gray': '#C9CDD4',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        easy: '#52C41A',
                        medium: '#FAAD14',
                        hard: '#FF4D4F',
                        'sysu-blue': '#045525',
                        'sysu-lightBlue': '#E6EDF7',
                        'sysu-gray': '#F7F9FC',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                        mono: ['Fira Code', 'monospace'],
                    },
                    boxShadow: {
                        'card': '0 2px 14px 0 rgba(0, 0, 0, 0.06)',
                        'hover': '0 6px 20px 0 rgba(0, 0, 0, 0.1)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .resize-handle {
                @apply bg-medium-gray hover:bg-primary transition-colors cursor-col-resize w-1 h-full;
            }
            .resize-handle-horizontal {
                @apply bg-medium-gray hover:bg-primary transition-colors cursor-row-resize w-full h-1;
            }
            .editor-line {
                @apply pl-2 py-1 border-l-2 border-transparent hover:border-primary/30 transition-colors;
            }
            .editor-line-active {
                @apply border-primary bg-primary/5;
            }
            .btn-action {
                @apply px-3 py-1.5 rounded-md text-sm transition-all duration-200 hover:shadow-md;
            }
            .tab-item {
                @apply px-4 py-2 text-sm font-medium transition-all border-b-2 border-transparent hover:text-primary hover:bg-gray-100;
            }
            .tab-item-active {
                @apply text-primary border-primary;
            }
            .sidebar-expanded {
                width: 300px;
                left: 0;
            }
            .sidebar-collapsed {
                width: 0;
                left: -300px;
            }
            .stat-card {
                @apply bg-white rounded-xl p-5 shadow-card card-hover;
            }
            .main-content-expanded {
                margin-left: 300px;
            }
            .main-content-collapsed {
                margin-left: 0;
            }
            .toggle-btn {
                @apply fixed z-50 bg-primary text-white p-2 rounded-full shadow-lg transition-all duration-300 hover:bg-primary/90 focus:outline-none;
            }
            .toggle-btn-left {
                left: 310px;
            }
            .toggle-btn-right {
                left: 10px;
            }
            /* 配置保存提示 */
            .save-toast {
                @apply fixed bottom-4 right-4 bg-success text-white px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300 transform translate-y-0 opacity-100;
            }
            .save-toast.hidden {
                @apply translate-y-20 opacity-0 pointer-events-none;
            }
            /* CodeMirror 样式调整 */
            .CodeMirror {
                height: 100% !important;
                font-family: 'Fira Code', monospace !important;
                font-size: 14px !important;
            }
            .CodeMirror-gutters {
                border-right: 1px solid #ddd !important;
                background-color: #f7f7f7 !important;
            }
            .CodeMirror-linenumber {
                color: #999 !important;
                padding: 0 8px !important;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark h-screen overflow-hidden flex flex-col">
    <!-- 题库隐藏/显示切换按钮 -->
    <button id="题库切换按钮" class="toggle-btn toggle-btn-right top-3">
        <i class="fa fa-list-ul text-xl"></i>
    </button>

    <!-- 配置保存成功提示 -->
    <div id="save-toast" class="save-toast hidden">
        <i class="fa fa-check-circle mr-2"></i>配置已自动保存
    </div>

    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-gray-200 shadow-sm z-30">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- 左侧Logo和标题 -->
                <div class="flex items-center space-x-1">
                    <button id="toggleSidebar" class="p-2 rounded-md text-gray-600 hover:text-primary hover:bg-gray-100 focus:outline-none transition duration-200 ease-in-out md:hidden">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <div href="/questions" class="w-10 h-10 bg-sysu-blue rounded-lg bg-primary flex items-center justify-center text-white">
                        <i class="fa fa-graduation-cap text-xl" ></i>
                    </div>
                    <h1 class="text-xl font-bold text-dark"><a href="/questions">中山大学刷题平台</a></h1>
                </div>

                <!-- 右侧用户区域 -->
                <div class="flex items-center space-x-4" id="user-area-container">
                    <!-- 加载状态 -->
                    <div class="flex items-center" id="loading-indicator">
                        <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                    </div>
                </div>

                <script>
                // 页面加载完成后检查登录状态
                document.addEventListener('DOMContentLoaded', function() {
                    checkLoginStatus();
                });

                // 检查登录状态的AJAX请求
                async function checkLoginStatus() {
                    const container = document.getElementById('user-area-container');
                    const loadingIndicator = document.getElementById('loading-indicator');

                    try {
                        const token = localStorage.getItem('token');
                        const response = await fetch('/api/check_login', {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + token
                            }
                        });

                        if (!response.ok) {
                            throw new Error('验证请求失败');
                        }

                        const data = await response.json();
                        if (data.is_logged_in) {
                            renderLoggedInView(container, data || {});
                        } else {
                            renderLoggedOutView(container);
                        }
                    } catch (error) {
                        console.error('登录状态验证出错:', error);
                        renderLoggedOutView(container);
                    } finally {
                        if (loadingIndicator) {
                            loadingIndicator.remove();
                        }
                    }
                }

                // 渲染已登录视图
                function renderLoggedInView(container, userData) {
                    container.innerHTML = `
                        <div class="relative" id="userDropdown">
                            <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                                <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                     alt="${userData.username || '用户头像'}"
                                     class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                                <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                            </button>
                            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                                <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                                <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                                <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                            </div>
                        </div>
                    `;
                    bindDropdownEvents();
                }

                // 退出登录
                function logout() {
                    try {
                        const token = localStorage.getItem('token');
                        fetch('/api/v1/logout', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + token
                            }
                        }).then(() => {
                            localStorage.removeItem('token');
                            window.location.href = '/';
                        });
                    } catch (error) {
                        console.error('退出登录出错:', error);
                    }
                }

                // 渲染未登录视图
                function renderLoggedOutView(container) {
                    container.innerHTML = `
                        <div class="flex items-center space-x-3">
                            <a href="#" class="text-gray-600 hover:text-sysu-blue transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                登录
                            </a>
                            <a href="#" class="bg-sysu-blue text-white hover:bg-sysu-blue/90 transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                注册
                            </a>
                        </div>
                    `;
                }

                // 绑定下拉菜单交互事件
                function bindDropdownEvents() {
                    const dropdownTrigger = document.getElementById('dropdownTrigger');
                    const dropdownMenu = document.getElementById('dropdownMenu');
                    const dropdownIcon = document.getElementById('dropdownIcon');
                    const userDropdown = document.getElementById('userDropdown');

                    if (!dropdownTrigger || !dropdownMenu || !dropdownIcon) return;

                    dropdownTrigger.addEventListener('click', (e) => {
                        e.stopPropagation();
                        dropdownMenu.classList.toggle('hidden');
                        dropdownIcon.classList.toggle('rotate-180');
                    });

                    document.addEventListener('click', () => {
                        if (!dropdownMenu.classList.contains('hidden')) {
                            dropdownMenu.classList.add('hidden');
                            dropdownIcon.classList.remove('rotate-180');
                        }
                    });

                    dropdownMenu.addEventListener('click', (e) => {
                        e.stopPropagation();
                    });

                    userDropdown.addEventListener('mouseleave', () => {
                        setTimeout(() => {
                            if (!dropdownMenu.matches(':hover') && !dropdownTrigger.matches(':hover')) {
                                dropdownMenu.classList.add('hidden');
                                dropdownIcon.classList.remove('rotate-180');
                            }
                        }, 300);
                    });
                }
                </script>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-1 flex overflow-hidden">
        <!-- 左侧题目列表 - 默认隐藏 -->
        <aside id="sidebar" class="bg-white shadow-lg fixed h-full z-40 overflow-y-auto transition-all duration-300 sidebar-collapsed">
            <div class="p-4 border-b">
                <div class="relative">
                    <input type="text" placeholder="搜索题目..." class="w-full py-2 pl-10 pr-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200">
                    <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>

            <div class="p-4">
                <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">题目分类</h2>
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary/10 text-primary">
                            <i class="fa fa-list-ul w-5 text-center mr-2"></i>
                            全部题目
                            <span class="ml-auto bg-primary/20 text-primary text-xs px-2 py-0.5 rounded-full">120</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <i class="fa fa-star w-5 text-center mr-2"></i>
                            热门推荐
                            <span class="ml-auto bg-gray-200 text-gray-700 text-xs px-2 py-0.5 rounded-full">30</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <i class="fa fa-signal w-5 text-center mr-2"></i>
                            简单
                            <span class="ml-auto bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">45</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <i class="fa fa-balance-scale w-5 text-center mr-2"></i>
                            中等
                            <span class="ml-auto bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">50</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <i class="fa fa-fire w-5 text-center mr-2"></i>
                            困难
                            <span class="ml-auto bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full">25</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="p-4 border-t">
                <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">题目列表</h2>
                <ul class="space-y-1 max-h-[calc(100vh-320px)] overflow-y-auto pr-1">
                    <!-- 题目项 - 当前选中 -->
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-primary/10 text-primary border-l-4 border-primary">
                            <span class="w-6 text-center mr-2">01</span>
                            <span class="flex-1 truncate">两数之和</span>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded-full">简单</span>
                        </a>
                    </li>

                    <!-- 其他题目项 -->
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <span class="w-6 text-center mr-2">02</span>
                            <span class="flex-1 truncate">两数相加</span>
                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">中等</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <span class="w-6 text-center mr-2">03</span>
                            <span class="flex-1 truncate">无重复字符的最长子串</span>
                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">中等</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <span class="w-6 text-center mr-2">04</span>
                            <span class="flex-1 truncate">寻找两个正序数组的中位数</span>
                            <span class="bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full">困难</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100 transition duration-200">
                            <span class="w-6 text-center mr-2">05</span>
                            <span class="flex-1 truncate">最长回文子串</span>
                            <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-0.5 rounded-full">中等</span>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>

        <!-- 分隔线 - 可拖拽 -->
        <div id="sidebar-resizer" class="resize-handle"></div>

        <!-- 中间和右侧内容区 -->
        <div id="main-content" class="flex-1 flex flex-col overflow-hidden transition-all duration-300 main-content-collapsed">
            <!-- 题目详情和代码编辑区域 -->
            <div class="flex-1 flex overflow-hidden">
                <!-- 题目详情区域 -->
                <div id="problem-area" class="w-1/2 overflow-hidden flex flex-col">
                    <div class="flex space-x-1" id="tab-container">
                        <button class="tab-item tab-item-active" name="problem-detail" id="question-btn">题目详情</button>
                        <button class="tab-item" name="submission" id="submission-btn">提交记录</button>
                        <button class="tab-item" name="solution" id="solution-btn">题解</button>
                    </div>
                    <div class="bg-white border-b border-gray-200 p-4" id="question-detail">
                        <div class="flex items-start justify-between">
                            <div>
                                <h2 class="text-lg font-bold">{{ question.id }}. {{ question.title }}</h2>
                                <div class="flex items-center mt-1 space-x-3">
                                    <span class="px-2.5 py-0.5 text-dark text-xs rounded-full {% if question.difficulty == 'easy' %}bg-easy/50{% elif question.difficulty == 'medium' %}bg-medium/50{% elif question.difficulty == 'hard' %}bg-hard/50{% endif %}">{{ question.difficulty }}</span>
                                    <div class="flex items-center text-gray-500 text-sm">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <span>30分钟</span>
                                    </div>
                                    <div class="flex items-center text-gray-500 text-sm">
                                        <i class="fa fa-code mr-1"></i>
                                        <span>12.3K 提交</span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <button class="btn-action bg-light-gray text-gray-700 hover:bg-gray-200">
                                    <i class="fa fa-star-o mr-1"></i>收藏
                                </button>
                                <button class="btn-action bg-light-gray text-gray-700 hover:bg-gray-200">
                                    <i class="fa fa-share-alt mr-1"></i>分享
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="flex-1 overflow-y-auto p-6 bg-white" id="question-sample">
                        <div class="prose max-w-none">
                            <h3 class="text-base font-semibold mb-3" id="problem-description">题目描述</h3>
                            {% for p in question.content.split('\n') %}
                                <p class="text-gray-700 mb-4">{{ p }}</p>
                            {% endfor %}

                            <h3 class="text-base font-semibold mb-3">示例</h3>
                            <div class="bg-gray-50 p-4 rounded-lg mb-6">
                                <p class="text-gray-700 mb-2"><strong>输入：</strong>nums = [2,7,11,15], target = 9</p>
                                <p class="text-gray-700 mb-0"><strong>输出：</strong>[0,1]</p>
                                <p class="text-gray-600 text-sm mt-1">解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。</p>
                            </div>

                            <div class="bg-gray-50 p-4 rounded-lg mb-6">
                                <p class="text-gray-700 mb-2"><strong>输入：</strong>nums = [3,2,4], target = 6</p>
                                <p class="text-gray-700 mb-0"><strong>输出：</strong>[1,2]</p>
                            </div>

                            <h3 class="text-base font-semibold mb-3">提示</h3>
                            <ul class="list-disc pl-5 text-gray-700 mb-6 space-y-1">
                                <li>2 <= nums.length <= 10<sup>4</sup></li>
                                <li>-10<sup>9</sup> <= nums[i] <= 10<sup>9</sup></li>
                                <li>-10<sup>9</sup> <= target <= 10<sup>9</sup></li>
                                <li>只会存在一个有效答案</li>
                            </ul>

                            <h3 class="text-base font-semibold mb-3">进阶</h3>
                            <p class="text-gray-700 mb-6">你可以想出一个时间复杂度小于 O(n<sup>2</sup>) 的算法吗？</p>
                        </div>
                    </div>

                    <!-- 提交记录内容 -->
                    <div class="tab-content hidden" id="question-submission">
                        <div class="bg-white p-4 border-b border-gray-200">
                            <div class="flex justify-between items-center">
                                <h3 class="font-medium">提交记录</h3>
                                <div class="flex space-x-2">
                                    <select class="bg-light-gray text-sm rounded-md py-1 px-3 focus:outline-none focus:ring-2 focus:ring-primary/30">
                                        <option value="all">所有语言</option>
                                        <option value="python">Python3</option>
                                        <option value="java">Java</option>
                                        <option value="cpp">C++</option>
                                    </select>
                                    <select class="bg-light-gray text-sm rounded-md py-1 px-3 focus:outline-none focus:ring-2 focus:ring-primary/30">
                                        <option value="all">所有状态</option>
                                        <option value="ac">通过</option>
                                        <option value="wa">解答错误</option>
                                        <option value="tle">超时</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 overflow-y-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50 sticky top-0">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">提交时间</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">语言</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">执行时间</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">内存消耗</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:30</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Python3</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">48 ms</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15.2 MB</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">通过</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看详情</a>
                                            <a href="#" class="text-gray-500 hover:text-gray-700">重新提交</a>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:28</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Python3</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">解答错误</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="#" class="text-primary hover:text-primary/80 mr-3">查看详情</a>
                                            <a href="#" class="text-gray-500 hover:text-gray-700">重新提交</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 题解内容 -->
                    <div class="tab-content hidden" id="question-solution">
                        <div class="bg-white p-4 border-b border-gray-200">
                            <div class="flex justify-between items-center">
                                <h3 class="font-medium">题解</h3>
                                <button class="btn-action bg-sysu-green text-white hover:bg-sysu-darkGreen">
                                    <i class="fa fa-pencil mr-1"></i> 发布题解
                                </button>
                            </div>
                        </div>
                        <div class="flex-1 overflow-y-auto bg-white p-4">
                            <!-- 题解筛选器 -->
                            <div class="flex flex-wrap gap-3 mb-6">
                                <button class="px-3 py-1 bg-primary text-white text-sm rounded-md">全部题解</button>
                                <button class="px-3 py-1 bg-light-gray text-gray-700 text-sm rounded-md hover:bg-gray-200">官方题解</button>
                                <button class="px-3 py-1 bg-light-gray text-gray-700 text-sm rounded-md hover:bg-gray-200">精选题解</button>
                                <button class="px-3 py-1 bg-light-gray text-gray-700 text-sm rounded-md hover:bg-gray-200">Python</button>
                                <button class="px-3 py-1 bg-light-gray text-gray-700 text-sm rounded-md hover:bg-gray-200">Java</button>
                                <button class="px-3 py-1 bg-light-gray text-gray-700 text-sm rounded-md hover:bg-gray-200">C++</button>
                            </div>

                            <!-- 题解列表 -->
                            <div class="space-y-6">
                                <!-- 题解项1 -->
                                <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-elevation-1 transition-shadow">
                                    <div class="p-4 border-b border-gray-200 bg-gray-50">
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <img src="/static/avatar1.jpg" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                                                <div>
                                                    <h4 class="font-medium text-gray-800">哈希表解法 - 时间复杂度 O(n)</h4>
                                                    <div class="flex items-center text-xs text-gray-500 mt-0.5">
                                                        <span>张三</span>
                                                        <span class="mx-2">·</span>
                                                        <span>2023-05-20</span>
                                                        <span class="mx-2">·</span>
                                                        <span>Python3</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-4">
                                                <span class="text-sm text-gray-500 flex items-center">
                                                    <i class="fa fa-thumbs-up mr-1"></i> 128
                                                </span>
                                                <span class="text-sm text-gray-500 flex items-center">
                                                    <i class="fa fa-comment mr-1"></i> 32
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-4">
                                        <div class="prose prose-sm max-w-none">
                                            <p>本题可以使用哈希表来优化时间复杂度，通过一次遍历即可解决。</p>
                                            <h5>解题思路：</h5>
                                            <ol>
                                                <li>创建一个哈希表，用于存储已经遍历过的数字及其索引</li>
                                                <li>对于每个数字，计算目标值与当前数字的差值</li>
                                                <li>如果差值在哈希表中存在，则返回两个数字的索引</li>
                                                <li>否则，将当前数字及其索引存入哈希表</li>
                                            </ol>
                                            <h5>代码实现：</h5>
                                            <pre><code class="language-python">def twoSum(nums, target):
    hashmap = {}
    for i, num in enumerate(nums):
        complement = target - num
        if complement in hashmap:
            return [hashmap[complement], i]
        hashmap[num] = i
    return []</code></pre>
                                            <h5>复杂度分析：</h5>
                                            <ul>
                                                <li>时间复杂度：O(n)，只需要遍历一次数组</li>
                                                <li>空间复杂度：O(n)，哈希表最多存储n个元素</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="p-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
                                        <button class="text-sm text-gray-500 hover:text-primary transition-colors">
                                            <i class="fa fa-thumbs-o-up mr-1"></i> 点赞
                                        </button>
                                        <button class="text-sm text-gray-500 hover:text-primary transition-colors">
                                            <i class="fa fa-comment-o mr-1"></i> 评论 (32)
                                        </button>
                                        <button class="text-sm text-gray-500 hover:text-primary transition-colors">
                                            <i class="fa fa-bookmark-o mr-1"></i> 收藏
                                        </button>
                                    </div>
                                </div>

                                <!-- 题解项2 -->
                                <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-elevation-1 transition-shadow">
                                    <div class="p-4 border-b border-gray-200 bg-gray-50">
                                        <div class="flex justify-between items-center">
                                            <div class="flex items-center">
                                                <img src="/static/avatar2.jpg" alt="用户头像" class="w-8 h-8 rounded-full mr-2">
                                                <div>
                                                    <h4 class="font-medium text-gray-800">暴力解法与优化思路</h4>
                                                    <div class="flex items-center text-xs text-gray-500 mt-0.5">
                                                        <span>李四</span>
                                                        <span class="mx-2">·</span>
                                                        <span>2023-04-15</span>
                                                        <span class="mx-2">·</span>
                                                        <span>Java</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-4">
                                                <span class="text-sm text-gray-500 flex items-center">
                                                    <i class="fa fa-thumbs-up mr-1"></i> 86
                                                </span>
                                                <span class="text-sm text-gray-500 flex items-center">
                                                    <i class="fa fa-comment mr-1"></i> 15
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="p-4">
                                        <div class="prose prose-sm max-w-none">
                                            <p>最直观的解法是使用两层循环遍历数组，找到和为目标值的两个数字。</p>
                                            <h5>暴力解法代码：</h5>
                                            <pre><code class="language-java">class Solution {
    public int[] twoSum(int[] nums, int target) {
        for (int i = 0; i < nums.length; i++) {
            for (int j = i + 1; j < nums.length; j++) {
                if (nums[i] + nums[j] == target) {
                    return new int[] {i, j};
                }
            }
        }
        return new int[0];
    }
}</code></pre>
                                            <p>虽然暴力解法简单直接，但时间复杂度较高，为O(n²)，在数据量大的时候会超时。因此推荐使用哈希表的优化方案。</p>
                                        </div>
                                    </div>
                                    <div class="p-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
                                        <button class="text-sm text-gray-500 hover:text-primary transition-colors">
                                            <i class="fa fa-thumbs-o-up mr-1"></i> 点赞
                                        </button>
                                        <button class="text-sm text-gray-500 hover:text-primary transition-colors">
                                            <i class="fa fa-comment-o mr-1"></i> 评论 (15)
                                        </button>
                                        <button class="text-sm text-gray-500 hover:text-primary transition-colors">
                                            <i class="fa fa-bookmark-o mr-1"></i> 收藏
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- 分页 -->
                            <div class="flex justify-center mt-8">
                                <nav class="inline-flex rounded-md shadow-sm">
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <i class="fa fa-chevron-left text-xs"></i>
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                                        1
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        2
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        3
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <i class="fa fa-chevron-right text-xs"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    const questionBtn = document.getElementById('question-btn');
                    const solutionBtn = document.getElementById('solution-btn');
                    const submissionBtn = document.getElementById('submission-btn');
                    const questionDetail = document.getElementById('question-detail');
                    const questionSample = document.getElementById('question-sample');
                    const questionSolution = document.getElementById('question-solution');
                    const questionSubmission = document.getElementById('question-submission');


                    questionBtn.addEventListener('click', () => {
                        questionBtn.classList.add('tab-item-active');
                        solutionBtn.classList.remove('tab-item-active');
                        submissionBtn.classList.remove('tab-item-active');
                        questionDetail.classList.remove('hidden');
                        questionSample.classList.remove('hidden');
                        questionSolution.classList.add('hidden');
                        questionSubmission.classList.add('hidden');
                        }
                    );
                    solutionBtn.addEventListener('click', () =>{
                        questionBtn.classList.remove('tab-item-active');
                        solutionBtn.classList.add('tab-item-active');
                        submissionBtn.classList.remove('tab-item-active');
                        questionDetail.classList.add('hidden');
                        questionSample.classList.add('hidden');
                        questionSolution.classList.remove('hidden');
                        questionSubmission.classList.add('hidden');
                        }
                    );

                    submissionBtn.addEventListener('click', () => {
                        questionBtn.classList.remove('tab-item-active');
                        solutionBtn.classList.remove('tab-item-active');
                        submissionBtn.classList.add('tab-item-active');
                        questionDetail.classList.add('hidden');
                        questionSample.classList.add('hidden');
                        questionSolution.classList.add('hidden');
                        questionSubmission.classList.remove('hidden');
                        }
                    );
                </script>

                <!-- 分隔线 - 可拖拽 -->
                <div id="middle-resizer" class="resize-handle"></div>

                <!-- 代码编辑和输出区域 -->
                <div id="code-area" class="flex-1 flex flex-col overflow-hidden">
                    <!-- 代码编辑区顶部工具栏 -->
                    <div class="bg-white border-b border-gray-200 p-3 flex items-center justify-between">
                        <div class="flex space-x-1">
                            <button class="tab-item tab-item-active">代码</button>
                            <button class="tab-item">提交记录</button>
                            <button class="tab-item">题解</button>
                        </div>

                        <div class="flex items-center space-x-3">
                            <div class="relative">
                                <select id="theme-select" class="appearance-none bg-light-gray text-gray-700 text-sm rounded-md py-1.5 pl-3 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30">
                                    <option value="dracula">Dracula (深色)</option>
                                    <option value="monokai">Monokai (深色)</option>
                                    <option value="ayu-light">Ayu Light (浅色)</option>
                                </select>
                            </div>

                            <div class="relative">
                                <select id="language-selector" class="appearance-none bg-light-gray text-gray-700 text-sm rounded-md py-1.5 pl-3 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30">
                                    <option value="python">Python3</option>
                                    <option value="java">Java</option>
                                    <option value="javascript">JavaScript</option>
                                    <option value="cpp">C++</option>
                                    <option value="c">C</option>
                                </select>
                                <i class="fa fa-angle-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"></i>
                            </div>

                            <button id="run-code-btn" class="btn-action bg-primary text-white hover:bg-primary/90">
                                <i class="fa fa-play mr-1"></i>运行
                            </button>

                            <button id="submit-code-btn" class="btn-action bg-success text-white hover:bg-success/90">
                                <i class="fa fa-check mr-1"></i>提交
                            </button>
                        </div>
                    </div>

                    <!-- 代码编辑区和输出区 -->
                    <div class="flex-1 flex flex-col overflow-hidden bg-white">
                        <!-- 代码编辑器 -->
                        <div id="editor-container" class="h-[66.666%] overflow-hidden flex flex-col">
                            <div class="flex items-center h-8 border-b border-gray-200 text-gray-500 text-xs">
                                <div class="flex items-center pl-4 space-x-4">
                                    <span><i class="fa fa-file-code-o mr-1"></i>solution.py</span>
                                    <span id="save-status"><i class="fa fa-save mr-1"></i>已保存</span>
                                </div>
                                <div class="ml-auto pr-4">
                                    <span><i class="fa fa-line-chart mr-1"></i>100% 覆盖率</span>
                                </div>
                            </div>

                            <!-- 代码编辑器容器 -->
                            <div class="flex-1 overflow-hidden">
                                <textarea id="code-editor" class="hidden">class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:
        # 创建一个哈希表，用于存储数值和对应的索引
        num_map = {}

        # 遍历数组
        for i, num in enumerate(nums):
            # 计算需要找到的互补数
            complement = target - num

            # 如果互补数存在于哈希表中，返回结果
            if complement in num_map:
                return [num_map[complement], i]

            # 否则将当前数值和索引存入哈希表
            num_map[num] = i</textarea>
                            </div>
                        </div>

                        <!-- 分隔线 - 可拖拽 -->
                        <div id="editor-output-resizer" class="resize-handle-horizontal"></div>

                        <!-- 输出区域 -->
                        <div id="output-container" class="flex-1 overflow-hidden flex flex-col">
                            <div class="h-8 border-b border-gray-200 text-gray-500 text-xs">
                                <div class="flex space-x-2 ml-4">
                                    <button class="tab-item tab-item-active py-1 text-xs">输出</button>
                                    <button class="tab-item py-1 text-xs">输入</button>
                                    <button class="tab-item py-1 text-xs">调试</button>
                                </div>
                            </div>

                            <div id="output-content" class="flex-1 overflow-y-auto p-4 font-mono text-sm">
                                <div class="mb-2 text-gray-500"><i class="fa fa-info-circle mr-1"></i>请点击"运行"按钮执行代码</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 全局变量存储CodeMirror实例
        let codeMirror;
        // 配置存储的键名
        const SETTINGS_KEY = 'sysu_coding_platform_settings';
        const CODE_CONTENT_KEY = 'sysu_coding_platform_code';
        // 防抖计时器
        let debounceTimer;

        // 默认配置
        const DEFAULT_SETTINGS = {
            theme: 'dracula',
            language: 'python',
            indentSize: 4,
            lineWrap: true,
            activeLine: true
        };

        // 获取DOM元素
        const 题库切换按钮 = document.getElementById('题库切换按钮');
        const toggleSidebar = document.getElementById('toggleSidebar');
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('main-content');
        const toggleBtnIcon = 题库切换按钮.querySelector('i');
        const runCodeBtn = document.getElementById('run-code-btn');
        const submitCodeBtn = document.getElementById('submit-code-btn');
        const outputContent = document.getElementById('output-content');
        const languageSelector = document.getElementById('language-selector');
        const themeSelector = document.getElementById('theme-select');
        const saveStatus = document.getElementById('save-status');
        const saveToast = document.getElementById('save-toast');

        // 从localStorage加载配置
        function loadSettings() {
            try {
                const saved = localStorage.getItem(SETTINGS_KEY);
                return saved ? JSON.parse(saved) : DEFAULT_SETTINGS;
            } catch (e) {
                console.error('加载配置失败:', e);
                return DEFAULT_SETTINGS;
            }
        }

        // 保存配置到localStorage（带防抖）
        function saveSettings(settings, showToast = true) {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                try {
                    localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
                    // 显示保存提示
                    if (showToast) {
                        showSaveToast();
                    }
                } catch (e) {
                    console.error('保存配置失败:', e);
                }
            }, 500); // 500ms内多次修改只保存一次
        }

        // 加载上次编辑的代码
        function loadCodeContent() {
            try {
                return localStorage.getItem(CODE_CONTENT_KEY) || '';
            } catch (e) {
                console.error('加载代码内容失败:', e);
                return '';
            }
        }

        // 保存代码内容（带防抖）
        function saveCodeContent(content) {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                try {
                    localStorage.setItem(CODE_CONTENT_KEY, content);
                    saveStatus.innerHTML = '<i class="fa fa-save mr-1"></i>已保存';
                } catch (e) {
                    console.error('保存代码内容失败:', e);
                }
            }, 1000); // 1秒内未修改则保存
        }

        // 显示保存成功提示
        function showSaveToast() {
            saveToast.classList.remove('hidden');
            setTimeout(() => {
                saveToast.classList.add('hidden');
            }, 2000);
        }

        // 切换题库显示/隐藏状态
        function toggle题库状态() {
            const isExpanded = sidebar.classList.contains('sidebar-expanded');

            if (isExpanded) {
                // 隐藏题库
                sidebar.classList.remove('sidebar-expanded');
                sidebar.classList.add('sidebar-collapsed');
                mainContent.classList.remove('main-content-expanded');
                mainContent.classList.add('main-content-collapsed');
                题库切换按钮.classList.remove('toggle-btn-left');
                题库切换按钮.classList.add('toggle-btn-right');
                toggleBtnIcon.classList.remove('fa-angle-left');
                toggleBtnIcon.classList.add('fa-list-ul');
            } else {
                // 显示题库
                sidebar.classList.remove('sidebar-collapsed');
                sidebar.classList.add('sidebar-expanded');
                mainContent.classList.remove('main-content-collapsed');
                mainContent.classList.add('main-content-expanded');
                题库切换按钮.classList.remove('toggle-btn-right');
                题库切换按钮.classList.add('toggle-btn-left');
                toggleBtnIcon.classList.remove('fa-list-ul');
                toggleBtnIcon.classList.add('fa-angle-left');
            }
        }

        // 绑定切换事件
        题库切换按钮.addEventListener('click', toggle题库状态);
        toggleSidebar.addEventListener('click', toggle题库状态);

        // 初始化代码编辑器
        function initCodeEditor() {
            const textarea = document.getElementById('code-editor');
            if (!textarea) return;

            // 加载保存的配置
            const savedSettings = loadSettings();

            // 初始化CodeMirror
            codeMirror = CodeMirror.fromTextArea(textarea, {
                lineNumbers: true,
                mode: getModeByLanguage(savedSettings.language), // 使用保存的语言模式
                theme: savedSettings.theme, // 使用保存的主题
                indentUnit: savedSettings.indentSize,
                tabSize: savedSettings.indentSize,
                indentWithTabs: false,
                lineWrapping: savedSettings.lineWrap,
                smartIndent: true,
                matchBrackets: true,
                autoCloseBrackets: true,
                styleActiveLine: savedSettings.activeLine,
                extraKeys: {
                    'Ctrl-Space': 'autocomplete',
                    'Ctrl-/': 'toggleComment',
                    'Shift-Enter': runCode,
                    'Ctrl-S': function(cm) {
                        saveCode(cm);
                    }
                }
            });

            // 设置编辑器高度
            const editorContainer = document.getElementById('editor-container');
            if (editorContainer) {
                const containerHeight = editorContainer.offsetHeight - 24; // 减去标题栏高度
                codeMirror.setSize(null, containerHeight);
            }

            // 加载保存的代码内容
            const savedCode = loadCodeContent();
            if (savedCode) {
                codeMirror.setValue(savedCode);
            } else {
                // 如果没有保存的代码，设置默认代码
                setDefaultCodeByLanguage(savedSettings.language);
            }

            // 监听内容变化，自动保存代码
            codeMirror.on('change', () => {
                saveStatus.innerHTML = '<i class="fa fa-save mr-1"></i>未保存';
                saveCodeContent(codeMirror.getValue());
            });

            // 更新UI控件状态
            themeSelector.value = savedSettings.theme;
            languageSelector.value = savedSettings.language;

            // 主题切换事件
            themeSelector.addEventListener('change', function() {
                const newSettings = { ...savedSettings, theme: this.value };
                codeMirror.setOption('theme', this.value);
                saveSettings(newSettings);
            });

            // 语言切换事件
            languageSelector.addEventListener('change', function() {
                const newSettings = { ...savedSettings, language: this.value };
                const mode = getModeByLanguage(this.value);
                codeMirror.setOption('mode', mode);
                // 根据语言切换默认代码
                setDefaultCodeByLanguage(this.value);
                saveSettings(newSettings);
            });
        }

        // 根据语言获取对应的CodeMirror模式
        function getModeByLanguage(lang) {
            const modes = {
                'python': 'python',
                'java': 'text/x-java',
                'javascript': 'javascript',
                'cpp': 'text/x-c++src',
                'c': 'text/x-csrc'
            };
            return modes[lang] || 'python';
        }

        // 根据语言设置默认代码
        function setDefaultCodeByLanguage(lang) {
            let code = '';
            switch(lang) {
                case 'python':
                    code = `class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:
        # 创建一个哈希表，用于存储数值和对应的索引
        num_map = {}

        # 遍历数组
        for i, num in enumerate(nums):
            # 计算需要找到的互补数
            complement = target - num

            # 如果互补数存在于哈希表中，返回结果
            if complement in num_map:
                return [num_map[complement], i]

            # 否则将当前数值和索引存入哈希表
            num_map[num] = i`;
                    break;
                case 'java':
                    code = `import java.util.HashMap;
import java.util.Map;

class Solution {
    public int[] twoSum(int[] nums, int target) {
        Map<Integer, Integer> map = new HashMap<>();
        for (int i = 0; i < nums.length; i++) {
            int complement = target - nums[i];
            if (map.containsKey(complement)) {
                return new int[] { map.get(complement), i };
            }
            map.put(nums[i], i);
        }
        throw new IllegalArgumentException("No solution");
    }
}`;
                    break;
                case 'cpp':
                    code = `#include <vector>
#include <unordered_map>
using namespace std;

class Solution {
public:
    vector<int> twoSum(vector<int>& nums, int target) {
        unordered_map<int, int> map;
        for (int i = 0; i < nums.size(); i++) {
            int complement = target - nums[i];
            if (map.find(complement) != map.end()) {
                return { map[complement], i };
            }
            map[nums[i]] = i;
        }
        return {};
    }
};`;
                    break;
                // 其他语言默认代码
                default:
                    code = '';
            }
            codeMirror.setValue(code);
        }

        // 手动保存代码
        function saveCode(cm) {
            const code = cm.getValue();
            saveCodeContent(code);

            // 显示保存成功提示
            const originalText = saveStatus.innerHTML;
            saveStatus.innerHTML = '<i class="fa fa-check mr-1"></i>保存成功';
            setTimeout(() => {
                saveStatus.innerHTML = originalText;
            }, 1500);
        }

        // 运行代码
        function runCode(cm) {
            const code = cm.getValue();
            console.log('运行代码:', code);

            // 显示运行中状态
            outputContent.innerHTML = '<div class="mb-2 text-blue-500"><i class="fa fa-spinner fa-spin mr-1"></i>正在运行...</div>';

            // 模拟代码运行（实际项目中应发送到后端执行）
            setTimeout(() => {
                // 模拟不同测试用例的输出结果
                const testCases = [
                    {
                        input: 'nums = [2,7,11,15], target = 9',
                        output: '[0, 1]',
                        expected: '[0, 1]'
                    },
                    {
                        input: 'nums = [3,2,4], target = 6',
                        output: '[1, 2]',
                        expected: '[1, 2]'
                    }
                ];

                // 构建输出HTML
                let outputHtml = '<div class="mb-2 text-success"><i class="fa fa-check-circle mr-1"></i>通过全部测试用例</div>';
                outputHtml += '<div class="text-gray-500">执行用时: 40 ms</div>';
                outputHtml += '<div class="text-gray-500">内存消耗: 15.1 MB</div>';

                testCases.forEach((test, index) => {
                    outputHtml += `
                        <div class="mt-3 pt-3 border-t border-gray-200">
                            <div class="text-gray-500">测试用例 ${index + 1}:</div>
                            <div class="mt-1">输入: ${test.input}</div>
                            <div class="mt-1 text-success">输出: ${test.output}</div>
                            <div class="mt-1 text-gray-500">预期结果: ${test.expected}</div>
                        </div>
                    `;
                });

                outputContent.innerHTML = outputHtml;
            }, 1000);
        }

        // 提交代码
        function submitCode() {
            const code = codeMirror.getValue();
            const language = languageSelector.value;
            console.log(`提交${language}代码:`, code);

            // 显示提交状态
            outputContent.innerHTML = '<div class="mb-2 text-blue-500"><i class="fa fa-spinner fa-spin mr-1"></i>正在提交代码...</div>';

            // 模拟提交过程
            setTimeout(() => {
                outputContent.innerHTML = `
                    <div class="mb-2 text-success"><i class="fa fa-trophy mr-1"></i>恭喜！代码提交成功</div>
                    <div class="text-gray-500">执行用时: 38 ms <span class="text-green-500">(击败 98.5% 的用户)</span></div>
                    <div class="text-gray-500">内存消耗: 14.9 MB <span class="text-green-500">(击败 92.3% 的用户)</span></div>
                    <div class="mt-3 pt-3 border-t border-gray-200">
                        <div class="text-gray-500">提交时间: ${new Date().toLocaleString()}</div>
                        <div class="text-gray-500">语言: ${languageSelector.options[languageSelector.selectedIndex].text}</div>
                    </div>
                `;
            }, 1500);
        }

        // 实现拖拽调整大小功能
        function makeResizable(element, resizer, direction = 'horizontal') {
            let startX, startY, startWidth, startHeight;

            const resize = function(e) {
                e.preventDefault();

                if (direction === 'horizontal') {
                    const width = startWidth + (e.clientX - startX);
                    // 限制最小宽度
                    if (width > 180) {
                        element.style.width = `${width}px`;
                        // 调整编辑器大小
                        if (codeMirror) {
                            codeMirror.refresh();
                        }
                    }
                } else {
                    const height = startHeight + (e.clientY - startY);
                    // 限制最小高度
                    if (height > 100) {
                        element.style.height = `${height}px`;
                        // 调整编辑器大小
                        if (codeMirror) {
                            const editorContainer = document.getElementById('editor-container');
                            if (editorContainer) {
                                const containerHeight = editorContainer.offsetHeight - 24;
                                codeMirror.setSize(null, containerHeight);
                            }
                        }
                    }
                }
            };

            const stopResize = function() {
                document.removeEventListener('mousemove', resize);
                document.removeEventListener('mouseup', stopResize);
                document.body.style.cursor = '';
                resizer.style.cursor = '';
            };

            resizer.addEventListener('mousedown', function(e) {
                e.preventDefault();

                startX = e.clientX;
                startY = e.clientY;

                if (direction === 'horizontal') {
                    startWidth = element.offsetWidth;
                    document.body.style.cursor = 'col-resize';
                    resizer.style.cursor = 'col-resize';
                } else {
                    startHeight = element.offsetHeight;
                    document.body.style.cursor = 'row-resize';
                    resizer.style.cursor = 'row-resize';
                }

                document.addEventListener('mousemove', resize);
                document.addEventListener('mouseup', stopResize);
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化代码编辑器
            initCodeEditor();

            // 初始化各个可拖拽区域
            makeResizable(
                document.getElementById('problem-area'),
                document.getElementById('middle-resizer'),
                'horizontal'
            );

            makeResizable(
                document.getElementById('editor-container'),
                document.getElementById('editor-output-resizer'),
                'vertical'
            );

            // 初始化代码高亮
            hljs.highlightAll();

            // 绑定按钮事件
            runCodeBtn.addEventListener('click', () => {
                if (codeMirror) runCode(codeMirror);
            });

            submitCodeBtn.addEventListener('click', submitCode);
        });
    </script>
</body>
</html>
